<template>
	<div class="list-page-b">
		<div class="list-page">
			<div class="list-search">
				<div class="singe-search">
					<el-input style="width: 296px" v-model.trim="searchForm.departmentName" clearable :size="size"
						placeholder="请输入想要搜索的部门名称"></el-input>
				</div>
				<div class="singe-search-btn">
					<el-button class="singe-search-btn1" @click="getList(1)">查询</el-button>
					<el-button class="singe-search-btn2" @click="resetForm">重置</el-button>
				</div>
				<div class="singe-search-btn saveBtn">
					<el-button class="singe-search-btn1" @click="add">新增</el-button>
				</div>
			</div>
			<div class="table-main">
				<el-table :data="tableData" style="width: 100%" :height="tableHeight">
					<el-table-column type="index" label="序号" width="70" align="center">
					</el-table-column>
					<el-table-column v-if="colLists[0].isTrue" min-width="150" label="部门名称" :show-overflow-tooltip="true"
						color="#ffffff" prop="deptName" align="left">
					</el-table-column>
          <el-table-column v-if="colLists[0].isTrue" min-width="120" label="部门编号" :show-overflow-tooltip="true"
                           color="#ffffff" prop="deptNum" align="left">
          </el-table-column>
					<el-table-column v-if="colLists[1].isTrue" min-width="150" label="上级部门" :show-overflow-tooltip="true"
						prop="parentName" align="left">
					</el-table-column>
					<el-table-column v-if="colLists[6].isTrue" :show-overflow-tooltip="true" label="部门负责人" min-width="150"
						prop="contactName" align="left">
					</el-table-column>
					<el-table-column label="操作" width="220" align="center" fixed="right" :resizable="false">
						<template slot-scope="scope">
							<el-button type="text" :size="size" @click="drawMap(scope.row)"
								style="color:#2E488B;margin-right: 15px;font-size:14px">绘制地图</el-button>
							<span style="color:#C1D3EE;" v-if="scope.row.id != '-1'">|</span>
							<el-button type="text" :size="size" @click="update(scope.row)"
								style="color:#2E488B;margin-left: 15px; margin-right: 15px;font-size:14px">编辑</el-button>
							<span style="color:#C1D3EE;" v-if="scope.row.id != '-1'">|</span>
							<el-button type="text" :size="size" @click="rowDelete(scope.row)" v-if="scope.row.id != '-1'"
								style="color: #ff4329;margin-left: 15px;font-size:14px">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageForm.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageForm.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="pageForm.total">
					</el-pagination>
				</div>
			</div>

			<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="728px" custom-class="operationDialog"
				class="form-dialog" append-to-body :close-on-click-modal="false" :destroy-on-close="true" :show-close="false"
				top="50px">
				<div class="modalBody body-have-footer" v-if="dialogVisible">
					<div class="dialog-divider"></div>
					<el-form ref="DialogForm" :model="dialogForm" :rules="rules" label-position="top">
            <el-form-item label="部门名称: (最多100字符)" prop="deptName">
							<template slot="label">
								<span class="label-text">部门名称:</span>
								<span class="label-subtext">(最多100字符)</span>
							</template>
							<el-input v-model.trim="dialogForm.deptName" :maxlength=100 placeholder="请输入部门名称"></el-input>
						</el-form-item>
            <el-form-item label="部门编号:" prop="deptNum">
              <template slot="label">
                <span class="label-text">部门编号:</span>
              </template>
              <el-input v-model.trim="dialogForm.deptNum" :maxlength=100 placeholder="请输入部门编号"></el-input>
            </el-form-item>
						<el-form-item label="上级部门:" prop="parentId">
							<el-cascader v-model="deptIdArr" :options="deptTree" :props="defaultProps" clearable="true"
								@change="handleDeptChange" placeholder="请选择上级部门"></el-cascader>
						</el-form-item>
						<el-form-item label="部门负责人:" prop="contactName">
							<el-input v-model.trim="dialogForm.contactName" :maxlength="200" placeholder="部门负责人">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<div style="clear: both"></div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="cancelDialog" size="small">
						取 消
					</el-button>
					<el-button type="primary" @click="submitDialog('DialogForm')" size="small" style="backgroud-color:#2E488B">
						提 交
					</el-button>

				</span>
			</el-dialog>
			<el-dialog title="提示" :visible.sync="delVisible" width="600px" class="form-dialog" append-to-body
				:close-on-click-modal="false">
				<div>
					<i class="el-icon-warning-outline" style="color:#EB5757;margin-right: 5px" />
					<span class="delSpan">是否确认删除当前部门？</span>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="delVisible = false" size="small">
						取 消
					</el-button>
					<el-button type="primary" @click="deleteDept" size="small" style="backgroud-color:#2E488B">
						确 定
					</el-button>

				</span>
			</el-dialog>
			<el-dialog title="绘制地图" :visible.sync="drawMapDialogVisible" width="1160px" :before-close="handleCloseDrawMap"
				append-to-body destroy-on-close :close-on-click-modal="false" custom-class="drawMapDialog">
				<div class="map" id="map">
				</div>
				<div class="input-card">
					<button class="btn" style="margin-bottom: 5px" @click="drawArea"
						v-show="!path || path.length === 0">绘制管辖区域</button>
					<button class="btn" style="margin-bottom: 5px" @click="drawArea"
						v-show="path && path.length > 0">重新绘制管辖区域</button>
					<button class="btn" style="margin-bottom: 5px" @click="openAdjustArea"
						v-show="path && path.length > 0 && !openAdjustAreaSign">调整管辖区域</button>
					<button class="btn" style="margin-bottom: 5px" @click="closeAdjustArea"
						v-show="path && path.length > 0 && openAdjustAreaSign">调整完成</button>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="handleCloseDrawMap">取 消</el-button>
					<el-button type="primary" @click="submitMap">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/util/auth";
	import {
		selectDepartment
	} from "@/api/famfrontend/masterData/masterData";
	import {
		getDeptTree,
		getDeptTemplatesTree,
		getTypeList
	} from '@/api/system/dept.js'
	import {
		getList,
		submit,
		remove,
	} from "../../../../api/famfrontend/companyInformation/departmentManagement/departmentManagement";
	import AMapLoader from '@amap/amap-jsapi-loader';
	var validateTemplateIds = (rule, value, callback) => {
		if (!value || value.length === 0) {
			callback(new Error('请选择模板'));
		} else {
			callback();
		}
	};
	export default {
		data() {

			return {
				defaultProps: {
					children: 'children',
					label: 'title',
					value: 'id',
					checkStrictly: true
				},
				treeDefaultProps: {
					children: 'templates',
					label: 'name',
					value: 'id'
				},
				placeholder: "",
				size: "small",
				dialogTitle: "",
				tableData: [],
				isLoading: false,
				loadding: false,
				dialogVisible: false,
				delVisible: false,
				AdialogTitle: "",
				AdialogVisible: false,
				AdialogForm: {
					id: "",
					addressName: "",
					provinceCode: "",
					cityCode: "",
					areaCode: "",
					detailedAddress: "",
					options: [],
				}, //弹窗里所有值
				Aoptions: [],
				Arules: {
					addressName: [{
						required: true,
						message: "请补充必填信息",
						trigger: "blur"
					}, ],
					options: [{
						required: true,
						message: "请补充必填信息",
						trigger: "change"
					}, ],
					detailedAddress: [{
						required: true,
						message: "请补充必填信息",
						trigger: "blur"
					}, ],
				},
				departmentData: [], //所有部门数组
				addressData: [],
				searchForm: {
					departmentName: "",
				},
				pageForm: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				dialogForm: {
					id: "",
					deptName: "",
          deptNum: "",
					// typeId: "",
					parentId: "",
					templateIds: "",
					officeAddress: "",
				},
				rules: {
					deptName: [{
						required: true,
						message: "请输入部门名称",
						trigger: "blur"
					}, ],
					deptNum: [{
						required: true,
						message: "请输入部门编号",
						trigger: "blur"
					}, ],
					parentId: [{
						required: true,
						message: "请选择上级部门",
						trigger: "change"
					}],
          contactName: [{
						required: true,
						message: "请输入负责人",
						trigger: "blur"
					}],
				},
				colLists: [{
						prop: "deptName",
						label: "部门名称",
						isTrue: true,
						width: 140,
					},
					{
						prop: "contactName",
						label: "负责人",
						isTrue: true,
						width: 120,
					},
					{
						prop: "telephone",
						label: "负责人手机号",
						isTrue: true,
						width: 160,
					},
					{
						prop: "fixedPhone",
						label: "负责人固定电话号",
						isTrue: true,
						width: 160,
					},
					{
						prop: "createTime",
						label: "创建时间",
						isTrue: true,
						width: 180,
					},
					{
						prop: "createUserName",
						label: "处理人",
						isTrue: true,
						width: 120,
					},
					{
						prop: "officeAddress",
						label: "部门所属地址",
						isTrue: true,
						width: 180,
					},
				],
				checkList: [],
				list: [],
				assetInformationDialog: false,
				goodsAssetExcelList: [], //弹窗内列表数据
				errorNum: "",
				importDialog: false,
				upLoadheaders: {
					"Blade-Auth": "",
				},
				data: {
					isCovered: "0",
				},
				deleteRow: {},
				deptTree: [],
				deptIdArr: [],
				deptTemplatesTree: [],
				defaultExpandedKeys: [],
				defaultCheckedKeys: [],
				typeList: [],
				typeMap: {},
				drawMapDialogVisible: false,
				AMap: undefined,
				map: undefined,
				mouseTool: undefined,
				polygonEditor: undefined,
				geometryUtil: undefined,
				polygon: undefined,
				marker: undefined,
				lngLatList: [],
				path: [],
				openAdjustAreaSign: false
			};
		},
		created() {
			this.upLoadheaders["Blade-Auth"] = "bearer " + getToken();
			this.getList(this.pageForm.pageNum);
			//获取所有部门
			selectDepartment().then((res) => {
				this.departmentData = res.data.data;
			});
		},
		mounted() {
			this.getDeptTree();
			// this.getDeptTemplatesTree();
			// this.getTypeList();
			this.colLists.forEach((item, index) => {
				this.checkList.push(item.label);
			});
		},
		computed: {
			tableHeight() {
				let h = document.body.clientHeight - 294;
				return h;
			},
		},
		methods: {
			// 初始化地图
			initAMap() {
				let self = this;
				AMapLoader.load({
						key: "5da1f8bb31f8532695a0fb696d584fae", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.Polygon', 'AMap.Marker',
							'AMap.GeometryUtil'
						], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
						//加载 AMapUI
						AMapUI: {
							version: "1.1", // AMapUI 版本
						}
					})
					.then((AMap) => {
						self.AMap = AMap;
						self.map = new AMap.Map("map", {
							// 设置地图容器id
							// viewMode: "3D", // 是否为3D地图模式
							zoom: 11, // 初始化地图级别
							center: [122.766159, 41.517449], // 初始化地图中心点位置，沈阳中心点
						});
						if (self.lngLatList && self.lngLatList.length > 0) {
							self.path = [];
							self.lngLatList.forEach(lngLat => {
								self.path.push(new self.AMap.LngLat(lngLat[0], lngLat[1]));
							})
							self.addPolygon(self.path);
						}
						self.mouseTool = new AMap.MouseTool(self.map);
						self.mouseTool.on('draw', function(event) {
							self.path = event.obj.getPath();
							self.lngLatList = self.getLngLat(self.path);
							self.addPolygon(self.path);
							self.mouseTool.close(true);
						});
					})
					.catch((e) => {
						console.log(e);
					});
			},
			addPolygon(data) {
				if (this.AMap && this.map && data) {
					let polygon = new this.AMap.Polygon({
						path: data,
						strokeColor: "#FF33FF",
						strokeOpacity: 1,
						strokeWeight: 6,
						fillColor: '#1791fc',
						fillOpacity: 0.4,
						strokeStyle: "solid"
					});
					polygon.on('mouseover', () => {
						polygon.setOptions({
							fillOpacity: 0.7,
							fillColor: '#7bccc4'
						})
					})
					polygon.on('mouseout', () => {
						polygon.setOptions({
							fillOpacity: 0.5,
							fillColor: '#ccebc5'

						})
					})
					this.polygon = polygon;
					this.map.add(polygon);
					this.map.setFitView(polygon);
				}
			},
			getLngLat(arr) {
				let lngLatArr = [];
				arr.forEach((point) => {
					let lngLat = [point.lng, point.lat];
					lngLatArr.push(lngLat);
				})
				return lngLatArr;
			},
			isPolygonIntersecting(pArr) {
				let sign = false;
				if (this.geometryUtil && pArr && pArr.length > 3) {
					let len = pArr.length;
					let p1 = pArr[len - 1];
					let p2 = pArr[0];
					for (let j = 1; j < len - 2; j++) {
						let p3 = pArr[j];
						let p4 = pArr[j + 1];
						sign = this.geometryUtil.doesSegmentsIntersect(p1, p2, p3, p4);
						if (sign) {
							console.log(0, j, j + 1);
							return sign;
						}
					}
					p2 = pArr[len - 2];
					for (let j = 0; j < len - 3; j++) {
						let p3 = pArr[j];
						let p4 = pArr[j + 1];
						sign = this.geometryUtil.doesSegmentsIntersect(p1, p2, p3, p4);
						if (sign) {
							console.log(len - 2, j, j + 1);
							return sign;
						}
					}
				}
				return sign;
			},
			openAdjustArea() {
				let self = this;
				if (this.polygon) {
					if (this.polygonEditor) {
						this.polygonEditor.open();
					} else {
						this.polygonEditor = new this.AMap.PolygonEditor(this.map, this.polygon);
						this.polygonEditor.on('end', function(data) {
							self.path = data.target.getPath();
							self.lngLatList = self.getLngLat(self.path);
						});
						this.polygonEditor.open();
					}
					this.openAdjustAreaSign = true;
				}
			},
			closeAdjustArea() {
				if (this.polygonEditor) {
					this.polygonEditor.close();
					this.openAdjustAreaSign = false;
				}
			},
			// 绘制区域
			drawArea() {
				if (this.map) {
					this.map.clearMap();
					if (this.polygonEditor) {
						this.polygonEditor.close();
						this.polygonEditor = undefined;
					}
				}
				let self = this;
				if (this.mouseTool) {
					this.mouseTool.polygon({
						strokeColor: "#FF33FF",
						strokeOpacity: 1,
						strokeWeight: 6,
						fillColor: '#1791fc',
						fillOpacity: 0.4,
						strokeStyle: "solid"
					})
				}
			},
			// 关闭绘制地图
			handleCloseDrawMap() {
				if (this.map) {
					this.map.destroy();
					this.AMap = undefined;
					this.map = undefined;
					this.mouseTool = undefined;
					this.polygonEditor = undefined;
					this.geometryUtil = undefined;
					this.polygon = undefined;
					this.marker = undefined;
					this.lngLatList = [];
					this.path = [];
				}
				this.drawMapDialogVisible = false;
			},
			submitMap() {
				let areaPoints = "";
				let areaPointsStrArr = [];
				if (this.lngLatList && this.lngLatList.length > 0) {
					this.lngLatList.forEach(lngLat => {
						areaPointsStrArr.push(lngLat.join(','));
					})
					areaPoints = areaPointsStrArr.join('|');
					this.dialogForm.areaPoints = areaPoints;
				}
				this.submit();
			},
			// 绘制地图
			drawMap(row) {
				let self = this;
				this.dialogForm = row;
				if (row.areaPoints) {
					let lngLatStrArr = row.areaPoints.split('|');
					this.lngLatList = [];
					this.path = [];
					lngLatStrArr.forEach(item => {
						let lngLat = item.split(',');
						self.lngLatList.push(lngLat);
					})
				}
				this.drawMapDialogVisible = true;
				this.initAMap();
			},
			changeTypeId(e) {
				console.log(e, this.dialogForm.typeId);
				let templateIds = this.typeMap[e].templateIds;
				this.$refs.tree.setCheckedKeys([]);
				this.defaultCheckedKeys = templateIds.split(",");
			},
			getTypeList() {
				let that = this;
				that.typeList = [];
				that.typeMap = {};
				getTypeList().then(res => {
					if (res.data.code === 200) {
						that.typeList = res.data.data;
						if (that.typeList && that.typeList.length > 0) {
							that.typeList.forEach(item => {
								that.typeMap[item.id] = item;
							})
						}
						console.log('部门类别', that.typeList, that.typeMap);
					}
				})
			},
			deptTemplatesTreeCheckChange(data, checked, indeterminate) {
				console.log(this.$refs.tree.getCheckedKeys());
				this.dialogForm.templateIds = this.$refs.tree.getCheckedKeys();
			},
			getDeptTemplatesTree() {
				let that = this;
				this.defaultExpandedKeys = [];
				getDeptTemplatesTree().then(res => {
					if (res.data.code === 200) {
						let arr = [];
						that.deptTemplatesTree = res.data.data[0].children;
						that.getDefaultExpandedKeys(that.deptTemplatesTree, arr);
						that.defaultExpandedKeys = arr;
					}
				})
			},
			getDefaultExpandedKeys(tree, arr) {
				let that = this;
				tree.forEach(item => {
					if (item.templates && item.templates.length > 0) {
						arr.push(item.id);
						that.getDefaultExpandedKeys(item.templates, arr);
					}
				})
			},
			handleDeptChange(e) {
				console.log('选择部门', e);
				if (e && e.length > 0) {
					this.dialogForm.parentId = e[e.length - 1];
				} else {
					this.dialogForm.parentId = '';
				}
			},
			getDeptTree() {
				let that = this;
				getDeptTree().then(res => {
					console.log('部门树', res);
					if (res.data.code === 200) {
						that.deptTree = res.data.data[0];
					}
				})
			},
			// 新增可输入地址框
			add11() {
				this.AdialogForm = {};
				this.AdialogForm.options = [];
				this.AdialogTitle = "地址信息";
				this.AdialogVisible = true;
				if (this.$refs.addressdialogForm) {
					this.$refs.addressdialogForm.resetFields();
				}
			},
			// 新增可输入地址框-行政区
			AhandleChange(value) {
				this.AdialogForm.provinceCode = "";
				this.AdialogForm.cityCode = "";
				this.AdialogForm.areaCode = "";

				if (value.length == 3) {
					this.AdialogForm.provinceCode = value[0];
					this.AdialogForm.cityCode = value[1];
					this.AdialogForm.areaCode = value[2];
				} else if (value.length == 2) {
					this.AdialogForm.provinceCode = value[0];
					this.AdialogForm.cityCode = value[1];
				} else if (value.length == 1) {
					this.AdialogForm.provinceCode = value[0];
				}
			},
			reset() {
				if (this.dialogForm.addressId == "") {
					this.placeholder = null;
				}
			},
			change(val) {
				for (let i = 0; i < this.addressData.length; i++) {
					if (this.addressData[i].id === val) {
						// this.placeholder= this.addressData[i].provinceName + this.addressData[i].cityName + this.addressData[i].areaName + this.addressData[i].detailedAddress
						this.placeholder = this.addressData[i].detailedAddress;
					}
				}
				console.log(this.placeholder);
				this.dialogForm.deptId = val;
				this.departmentData.forEach((item) => {
					if (val == item.id) {
						this.dialogForm.deptName = item.deptName;
					}
				});
			},
			// 弹窗列表行标红
			tableAddClass({
				row,
				rowIndex
			}) {
				if (row.isError) {
					return "tr-red";
				}
				return "";
			},
			//下载模板
			exportTemplate() {
				this.$message.success("下载完成");
				window.open(
					`/api/blade-system/dept/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
				);
			},
			// 上传前
			beforeUpload(file) {
				const isExcel =
					file.type ===
					"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
					file.type === "application/vnd.ms-excel";
				if (!isExcel) {
					this.$message.error("上传文件只能是xlsx/xls格式");
				}
				return isExcel;
			},
			// 导入员工
			importDepartmentEx() {
				this.importDialog = true;
				// this.$refs.upLoad.clearFiles();
			},
			//  上传时
			handleProgress() {
				this.isLoading = true;
			},
			// 上传成功
			handleSuccess(res) {
				this.isLoading = false;
				this.importDialog = false;
				this.loadding = false;
				this.errorNum = res.data.errorNum;
				this.goodsAssetExcelList = res.data.deptExcelList;
				// 打开资产信息导入弹窗
				this.assetInformationDialog = true;
				// this.$refs.upLoad.clearFiles();
				this.getList(this.pageForm.pageNum);
				this.$refs.upLoad.clearFiles();
			},
			// 弹窗内导入数据
			importData() {
				this.loadding = true;
				const params = this.goodsAssetExcelList;

			},
			// 上传失败
			handleError(err) {
				let myError = err.toString(); //转字符串
				myError = myError.replace("Error: ", ""); // 去掉前面的" Error: "
				myError = JSON.parse(myError); //转对象
				this.isLoading = false;
				this.$message.error(myError.msg);
			},

			filter(val) {
				this.list = [];
				this.colLists.forEach((item, index) => {
					this.list.push(item.label);
				});
				// 未选中的不展示
				this.result = this.list.filter((number) => !val.includes(number));
				if (this.result.length >= 1) {
					this.result.forEach((item, index) => {
						this.colLists.forEach((items, indexs) => {
							if (items.label == item) {
								items.isTrue = false;
							}
						});
					});
				}
				// 选中的数据继续展示
				val.forEach((item, index) => {
					this.colLists.forEach((items, indexs) => {
						if (items.label == item) {
							items.isTrue = true;
						}
					});
				});
				//console.log('最终this.colLists', this.colLists);
				/*this.$nextTick(() => { //在数据加载完，重新渲染表格
				  this.$refs['multipleTable'].doLayout();
				})*/
			},
			//分页
			getList(pageNum) {
				const params = {
					deptName: this.searchForm.departmentName,
				};
				getList(pageNum, this.pageForm.pageSize, params).then((res) => {
					this.tableData = res.data.data.records;
					let tableData_ = JSON.parse(JSON.stringify(this.tableData))
					this.tableData.forEach((item) => {
						tableData_.forEach(item_ => {
							if (item.parentId === item_.id) {
								this.$set(item, "parentName", item_.deptName)
							}
						})
					})
					this.pageForm.total = res.data.data.total;
					this.pageForm.pageNum = pageNum;
					this.pageForm.pageSize = res.data.data.size;
				});
			},
			resetForm() {
				this.pageForm.pageNum = 1;
				this.searchForm.departmentName = "";
				this.getList(this.pageForm.pageNum);
			},
			//设置表头行的样式
			tableHeaderColor({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return "";
			},
			//新增
			add() {
				this.defaultCheckedKeys = [];
				this.dialogForm.id = "";
				this.dialogForm.typeId = "";
				this.dialogForm.deptName = "";
				this.dialogForm.deptNum = "";
				this.dialogForm.officeAddress = "";
				this.dialogForm.parentName = "";
				this.dialogForm.templateIds = "";
				this.placeholder = "";
				this.deptIdArr = [];
				this.dialogTitle = "新增-部门";
				this.dialogVisible = true;
				if (this.$refs.DialogForm) {
					this.$refs.DialogForm.resetFields();
				}
			},
			//编辑
			update(row) {
				this.defaultCheckedKeys = [];
				this.dialogTitle = "编辑-部门";
				this.dialogForm = row;
				this.dialogForm.typeId = parseInt(row.typeId);
				this.defaultCheckedKeys = row.templateIds;
				if (!this.dialogForm.officeAddress) {
					this.placeholder = "";
				}
				let parentId = this.dialogForm.parentId;
				this.deptIdArr = [parentId];
				let flag = true;
				while (flag) {
					parentId = this.queryParentId(parentId, this.deptTree.children);
					if (!parentId) {
						break;
					}
					if (parentId !== '1' && parentId !== 1 && parentId !== 0 && parentId !== '0') {
						this.deptIdArr.unshift(parentId);
					} else {
						break;
					}
				}
				this.dialogVisible = true;
			},
			queryParentId(id, arr) {
				for (let i = 0, len = arr.length; i < len; i++) {
					if (id === arr[i].id) {
						return arr[i].parentId;
					} else {
						if (arr[i].children) {
							return this.queryParentId(id, arr[i].children);
						}
					}
				}
			},
			//提交新增/编辑信息
			submit() {
				submit(this.dialogForm).then((res) => {
					if (res.data.code == "200") {
						this.dialogVisible = false;
						this.handleCloseDrawMap();
						if (this.dialogForm.id) {
							this.$message.success("编辑成功");
						} else {
							this.$message.success("新增成功");
						}
						this.getList(this.pageForm.pageNum);
						this.getDeptTree();
					}
				});
			},
			//确认
			submitDialog(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.submit();
					}
				});
			},
			cancelDialog() {
				this.dialogVisible = false;
			},
			//删除
			deleteDept() {
				console.log(this.deleteRow)
				remove(this.deleteRow.id).then(() => {
					this.delVisible = false;
					this.$message({
						type: "success",
						message: "删除成功!",
					});
					this.getList(this.pageForm.pageNum);
				});
			},
			rowDelete(row) {
				this.delVisible = true
				this.deleteRow = row
				// this.$confirm("是否确认删除", "提示", {
				//   confirmButtonText: "确定",
				//   cancelButtonText: "取消",
				//   type: "warning",
				// })
				//   .then(() => {
				//     remove(row.id).then(() => {
				//       this.$message({
				//         type: "success",
				//         message: "删除成功!",
				//       });
				//       this.getList(this.pageForm.pageNum);
				//     });
				//   })
				//   .catch(() => {
				//     // this.$message({
				//     //   type: 'info',
				//     //   message: '已取消删除'
				//     // });
				//   });
			},
			handleSizeChange(val) {
				this.pageForm.pageSize = val;
				this.getList(1);
			},
			handleCurrentChange(val) {
				this.pageForm.pageNum = val;
				this.getList(val);
			},
		},
	};
</script>

<style scoped lang="scss">
	@import "../../../../styles/page/list";
	//@import "../../../../styles/reset-icon";

	.list-search {
		width: 100%;
		height: 86px;
		padding: 0px;
	}

	.singe-search {
		width: 296px !important;
		height: 36px !important;
		margin-right: 24px !important;

		::v-deep .el-input input {
			width: 296px;
			height: 36px;
		}

		::v-deep .el-select input {
			width: 296px;
			height: 36px;
		}

		::v-deep .el-cascader input {
			width: 296px;
			height: 36px;
		}
	}

	.singe-search-btn {
		height: 36px !important;

		.singe-search-btn1 {
			width: 88px !important;
			height: 36px !important;
			background: #2E488B !important;
			box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
			border-radius: 4px 4px 4px 4px !important;
			opacity: 1 !important;
			padding: 0 !important;

			font-size: 14px !important;
			font-family: PingFang SC-Regular, PingFang SC !important;
			font-weight: 400 !important;
			color: #FFFFFF !important;
		}

		.singe-search-btn2 {
			width: 88px !important;
			height: 36px !important;
			background: #FFFFFF !important;
			box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
			border-radius: 4px 4px 4px 4px !important;
			opacity: 1 !important;
			border: 1px solid #C1D3EE !important;
			padding: 0 !important;

			font-size: 14px !important;
			font-family: PingFang SC-Regular, PingFang SC !important;
			font-weight: 400 !important;
			color: #2E488B !important;
		}
	}

	.saveBtn {
		position: absolute;
		right: 5px;
	}

	::v-deep .el-dialog {
		.el-dialog__header {
			height: 46px !important;
			padding: 0 !important;
			margin: 0 20px !important;
			line-height: 46px !important;

			.el-dialog__headerbtn {
				top: 12px !important;
				right: 40px !important;
			}
		}

		.el-dialog__body {
			margin-top: 20px;
			border: 0 !important;
			overflow-y: hidden !important;
			max-height: inherit;

			.el-form-item {
				margin-bottom: 10px !important;
			}

			.imgItem {
				margin-bottom: 10px !important;
			}

			.el-cascader {
				width: 100% !important;
			}

			.el-upload__tip {
				position: absolute;
				top: 40px;
				left: 370px;
				line-height: 20px;
			}

			.el-switch__core {
				border-radius: 20px !important;
			}

			.tip {
				position: absolute;
				top: -40px;
				left: 81px;
				font-size: 14px;
				font-family: PingFang TC-Regular, PingFang TC;
				font-weight: 400;
				color: #959FBA;
			}

			.deleteDiv {
				position: relative;
				width: 100%;
				height: 60px;

				.icon {
					width: 20px;
					height: 20px;
					position: absolute;
					top: 19px;
					left: 0px;
				}

				.text {
					font-size: 16px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					position: absolute;
					top: 20px;
					left: 30px;
				}
			}
		}

		.el-dialog__footer {
			text-align: center !important;

			.el-button--default {
				padding: 7px 29px !important;
			}

			.el-button--primary {
				padding: 8px 30px !important;
			}
		}
	}

	.modalBody ::v-deep .el-upload {
		width: 100%;
	}

	.modalBody ::v-deep .el-upload-dragger {
		width: auto;
	}

	::v-deep.el-table .tr-red {
		color: red !important;
	}

	/* 去除表格竖线 */
	.el-table {
		color: #2A334D;
	}

	.el-table_row {
		height: 54px
	}

	.form-item-wrapper {
		position: relative;
	}

	.form-item-divider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #ccc;
	}

	.rounded-dialog .el-dialog__wrapper {
		border-radius: 10px;
		/* 调整半径值以控制圆角效果 */
	}

	.label-text {
		color: #333;
		/* 设置主要颜色 */
		font-size: 14px;
		/* 设置主要字号 */
		margin-right: 10px;
	}

	.label-subtext {
		color: #959FBA;
		/* 设置副文本颜色 */
		font-size: 14px;
		/* 设置副文本字号 */
	}

	.delSpan {
		font-size: 16px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.operationDialog {
		.deptTemplatesTreeDiv {
			width: 646px;
			height: 198px;
			// background: #F3F6F8;
			border-radius: 4px 4px 4px 4px;
			opacity: 1;
			border: 1px solid #C1D3EE;
			overflow-y: scroll;
		}
	}

	.drawMapDialog {
		.map {
			width: 1082px;
			height: 552px;
		}

		.input-card {
			width: 130px;
			display: flex;
			flex-direction: column;
			min-width: 0;
			word-wrap: break-word;
			background-color: #fff;
			background-clip: border-box;
			border-radius: 0.25rem;
			border-width: 0;
			border-radius: 0.4rem;
			box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
			position: absolute;
			bottom: 5rem;
			right: 3rem;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
			padding: 0.75rem 1.25rem;
		}
	}
</style>
